<template>
  <div>
    <div class="table">
      <div
        v-for="(item, index) in tablelist"
        :key="item.id"
        @click="chageitem(index)"
        :class="{ bgc: temp == index }"
      >
        {{ item.name }}
        <van-icon :name="item.play" />
      </div>
    </div>
    <div>
      <van-card
        v-for="(item) in list"
        :key="item.id"
        :num="item.stock"
        tag=""
        :price="item.price"
        :desc="item.subtitle"
        :title="item.name"
        :thumb="item.imageHost+item.mainImage"
        :origin-price="item.originalPrice"
        @click="$router.push('/detail/'+item.id)"
      />
    </div>
    
  </div>
</template>

<script>
export default {
  created() {
    this.getData();
  },
  data() {
    return {
      temp: 0,
      index: 0,
      tablelist: [
        { id: 1, name: "默认排序" },
        { id: 2, name: "升序", play: "play" },
        { id: 3, name: "降序", play: "play" },
        { id: 4, name: "筛选" },
      ],
      list: [],
    };
  },
  methods: {
    chageitem(index) {
      this.index = index;

    this.getData();

      //   console.log(this.temp);
    },
    async getData() {
        var dataItem=''
        console.log(this.index);
        if(this.index==1){
            dataItem='price_asc'
        }else if(this.index==2){
            dataItem='price_desc'
        }else{
            dataItem='default'
        }
        console.log({orderBy: dataItem});
      const res = await this.$require({
        // url: "/product/list?orderBy="+ dataItem,
        url:'/product/list',
        method: "get",
        params:{
          id:dataItem
        },
      });
      if (res.status == 200) {
        this.list = res.data.data.list;
        // console.log(this.list);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.thumb {
  width: 88px;
}
.table {
  //   width: 93px;
  line-height: 56px;
  text-align: center;
  margin-top: 50px;
  display: flex;
  border-top: 1px solid #dcdcdc;
  border-bottom: 1px solid #dcdcdc;
  div {
    flex: 1;
    text-align: center;
    font-size: 18px;
  }
  .bgc {
    background-color: #fff;
    color: #000000;
    color: #f63515;
    //   flex: 1;
  }
}
</style>